<template>
  <div>
    <!--header-->
    <van-nav-bar title="" left-arrow :fixed="true" :z-index="9" :border="false" style="background-color: #f44;height: 50px;" @click-left="onClickLeft"/>
    <div style="margin-top: 51px;">
      <form action="https://gateway.test.95516.com/gateway/api/frontTransReq.do" method="post" id="payUnionSubmit">
        <div v-show="false">
          <input type="text" v-for="(i, index) in Object.keys(formData)" :key="index" :name="i" v-model="formData[i]">
        </div>
      </form>
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell title="银联支付" label-position="left" clickable @click="unionPay">
            <span slot="icon" class="icon-wrap">
              <img src="/img/union.png" :round="true" height="20" width="20">
            </span>
            <van-radio slot="right-icon" name="1" />
          </van-cell>
          <van-cell title="微信支付" label-position="left" clickable @click="radio = '2'">
            <span slot="icon" class="icon-wrap">
              <img src="/img/weixin.png" :round="true" height="20" width="20">
            </span>
            <van-radio slot="right-icon" name="2" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cart',
  data () {
    return {
      radio: '', // 单选按钮name
      formData: {}, // 表单信息
      order: undefined // 订单信息
    }
  },
  methods: {
    /**
     * 返回上一页
     */
    onClickLeft () {
      this.$router.go(-1)
    },
    /**
     * 付款
     */
    onPay (orderNo, totalFee, itemName) {
      const self = this
      const param = { orderNo: orderNo, totalFee: totalFee, itemName: itemName }
      self.axios.post('api/unionPay/orderPay', param).then(resp => {
        if (resp.data.code !== '-1') {
          self.formData = resp.data.data
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 跳转银联付款页面
     */
    async unionPay () {
      try {
        this.radio = '1'
        if (this.order.orderNo !== undefined) {
          // 银联支付form表单跳转到银联
          document.getElementById('payUnionSubmit').submit()
        } else {
          this.$toast('请返回上个页面重新支付')
        }
      } catch (e) {
        this.$toast('请返回上个页面重新支付')
      }
    }
  },
  mounted () {
    const self = this
    // 订单id
    let order = self.$route.query.order
    self.order = order
    self.onPay(order.orderNo, order.totalFee * 100, '')
  }
}
</script>

<style lang="less">
.van-nav-bar .van-icon {
  color: white;
  vertical-align: middle;
}

.van-nav-bar__title {
  color: white;
}
</style>
